<template>
  <a-table
    class="table-box"
    :columns="columns"
    :data-source="tableList"
    :pagination="pagination"
    :scroll="{ y: '780px' }"
    @change="handleChangePage"
  >
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'address'">
        {{ record.region }}{{ record.address }}
      </template>
      <template v-if="column.dataIndex === 'cover'">
        <a-image
          :preview="true"
          width="60px"
          height="60px"
          :src="record.cover"
          alt="封面"
        ></a-image>
      </template>
      <template v-if="column.dataIndex === 'status'">
        <a-switch
          v-model:checked="record.status"
          un-checked-value="0"
          checked-value="1"
          @change="() => handleChange(record)"
        />
      </template>
      <template v-if="column.dataIndex === 'progress'">
        <span :class="[record.progress === '1' ? 'active' : '']">{{
          progressText[record.progress]
        }}</span>
      </template>
      <template v-if="column.dataIndex === 'tag'">
        <a-tag v-for="item in record.tag" :key="item" color="#87d068">{{ tagText[item] }}</a-tag>
      </template>
      <template v-if="column.dataIndex === 'createdAt'">
        {{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a-button @click="openEdit(record)" type="link">编辑</a-button>
        <a-button @click="openGoodEdit(record)" type="link">奖品池</a-button>
        <a-popconfirm title="确认删除该活动？" ok-text="删除" cancel-text="取消" @confirm="() => handleDelete(record)">
          <a-button type="link" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import type { TTable } from './type.dict'
const emit = defineEmits(['changePagination', 'openEdit', 'openGoodEdit', 'handleUpdate', 'handleDelete'])
defineProps<{
  tableList: TTable[]
  pagination: {
    total: number
    current: number
    pageSize: number
  }
}>()
const tagText = ['', '新人专区', '男生专属', '女生专属', '数码', '美妆', '情侣专属']
const progressText = ['预发布', '进行中', '已结束']
const handleChangePage = (e: { current: number; pageSize: number }) => {
  emit('changePagination', {
    pageSize: e.pageSize,
    current: e.current,
  })
}
const handleChange = (record: TTable) => {
  emit('handleUpdate', { _id: record._id, status: record.status })
}
const handleDelete = (record: TTable) => {
  emit('handleDelete', record)
}
const columns = [
  {
    title: '活动名称',
    dataIndex: 'name',
    fixed: 'left',
  },
  {
    title: '抽奖积分',
    dataIndex: 'price',
    width: 100,
  },
  {
    title: '封面',
    dataIndex: 'cover',
    width: 100,
  },
  {
    title: '已抽次数',
    dataIndex: 'use_num',
    width: 110,
  },
  {
    title: '进度',
    dataIndex: 'progress',
    width: 110,
  },
  {
    title: '标签',
    dataIndex: 'tag',
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 180,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 90,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 120,
  },
]
const openEdit = (record: TTable) => {
  emit('openEdit', record)
}
const openGoodEdit = (record: TTable) => {
  emit('openGoodEdit', record)
}
</script>
<style lang="stylus" scoped>
@import "@/assets/antgloab-ant.css";

.active {
  color: #1677ff;
}
.red{
  color red
}
.modal-center {
  display flex
  flex-direction column
  align-items center
  justify-content center
  margin 46px 0 40px

  .modal-text {
    margin 16px 0 56px
    font-size 16px
    font-weight 500
  }

  .modal-btn {
    width 200px
    height 46px
    border-radius: 4px
    background #3483FF
    font-weight 500
    font-size 16px
  }
}

:deep(.ant-table-body::-webkit-scrollbar) {
  width: 0;
}

.header_text {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
}
</style>
